<template>
    <div>
        <!-- 按钮 -->
        <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
            @click="refreshList"></el-button>
        <el-button type="primary" icon="el-icon-plus" style="margin:10px"
            @click="dialogVisible = true">添加店铺类别</el-button>
        <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
            <el-button slot="append" icon="el-icon-search" @click="refreshList"></el-button>
        </el-input>

        <el-table current-row-key="id" highlight-current-row @current-change="handleCurrentChange" style="width: 100%;"
            border :data="list">
            <el-table-column prop="name" label="分类名称" align="center">
            </el-table-column>
            <el-table-column prop="intro" label="分类描述" align="center">
            </el-table-column>
            <el-table-column prop="receivableDeposit" label=" 保证金" align="center">
            </el-table-column>
            <el-table-column prop="commissionPercentage" label="抽佣" align="center">
            </el-table-column>
            <el-table-column label="操作" width="s" align="center">
                <template slot-scope="{ row, $index }">

                    <el-tooltip content="修改" placement="top">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="editShow(row)"
                            style="margin-right: 10px;"></el-button>
                    </el-tooltip>

                    <el-popconfirm title="是否删除？" icon="el-icon-info" icon-color="red" @confirm="handleDelete(row.id)">
                        <el-tooltip content="删除" placement="top" slot="reference">
                            <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                        </el-tooltip>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px;text-align:center" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 对话框  -->
        <el-dialog :title="form.id ? '修改' : '添加'" :visible.sync="dialogVisible">
            <el-form style="width:80%" :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="分类名称" label-width="100px" prop="name">
                    <el-input autocomplete="off" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="分类描述" label-width="100px" prop="intro">
                    <el-input autocomplete="off" v-model="form.intro"></el-input>
                </el-form-item>
                <el-form-item label="保证金" label-width="100px" prop="receivableDeposit">
                    <el-input autocomplete="off" v-model="form.receivableDeposit"></el-input>
                </el-form-item>
                <el-form-item label="抽佣" label-width="100px" prop="commissionPercentage">
                    <el-input autocomplete="off" v-model="form.commissionPercentage"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { number } from 'echarts';

export default {
    name: 'StoreCategory',
    mounted() {
        //获取列表数据方法
        this.getInitList()
    },
    props: {
        value: Number
    },
    data() {
        return {
            // 表单验证
            rules: {
                name: [{
                    required: true,
                    message: '请输入商品名',
                    trigger: 'blur'
                }],
            },
            form: {
                id: '',
                intro: '',
                name: '',
                receivableDeposit: '',
                commissionPercentage: '',
            },
            dialogVisible: false,
            //列表数据
            list: [],
            total: 0,
            pageSize: 20,
            pageNumber: 1,
            //搜索
            searchText: '',
        }
    },
    methods: {
        // 添加代理商
        addSubmit() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let res1
                    if (!this.form.id) {
                        delete this.form.id
                        res1 = await this.$API.shopsort.addShopClassification(this.form);
                    }
                    else {
                        res1 = await this.$API.shopsort.updateShopClassification(this.form);
                    }
                    this.$message.success(`${this.form.id ? '修改' : '添加'}成功`)
                    this.getInitList()
                    this.dialogVisible = false;
                    this.form = {
                        intro: '',
                        name: '',
                        receivableDeposit: '',
                        commissionPercentage: '',
                    }
                }
            })
        },
        editShow(row) {
            this.form = JSON.parse(JSON.stringify({ ...this.form, ...row }))
            this.dialogVisible = true
        },
        handleCurrentChange(pageNumber) {
            this.pageNumber = pageNumber
            this.getInitList()
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.getInitList()
        },
        handleCurrentChange(row) {
            this.$emit('input', row.id)
        },

        refreshList() {
            this.pageNumber = 1
            this.getInitList()
        },
        async handleDelete(id) {
            await this.$API.shopsort.deleteShopClassification({ id })
            this.$message.success('删除成功')
            this.getInitList()
        },
        async getInitList() {
            const res = await this.$API.shopsort.getproductCategory({
                name: this.searchText,
                pageSize: this.pageSize,
                pageNumber: this.pageNumber,
            })
            this.list = res.data.rows;
            this.total = res.data.sumLine
        },

    }
}
</script>

<style scoped lang="scss"></style>